{{define "ai_message"}}
<div class="message mb-3">
    <div class="d-flex align-items-start gap-2">
        <div class="avatar">
            <div class="rounded-circle bg-secondary d-flex align-items-center justify-content-center" style="width: 32px; height: 32px;">
                <small class="text-white">AI</small>
            </div>
        </div>
        
        <div class="message-content">
            <div class="message-bubble p-3 rounded-3 text-emphasis-dark text-wrap" style="background-color: #0d1117;">
                <div 
                  {{if or (eq .StreamingState "streaming") (eq .StreamingState "loading")}}
                      hx-ext="sse"
                      sse-connect="/sse/messages?message_id={{.ID}}"
                      sse-close="closeMessage"
                      sse-swap="messages"
                      hx-on::after-swap="document.getElementById('chat-messages').scrollTop = document.getElementById('chat-messages').scrollHeight + 100"
                      hx-on::sse-close="document.getElementById('loading-message-{{.ID}}').setAttribute('style', 'display: none !important;')"
                      hx-swap="innerHTML"
                  {{end}}>{{.Content}}</div>
                {{if (eq .StreamingState "loading")}}
                    <div id="loading-message-{{.ID}}" class="d-flex align-items-center gap-2">
                        <div class="spinner-border spinner-border-sm text-secondary" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                        <span class="text-secondary">AI is thinking...</span>
                    </div>
                {{end}}
            </div>
            <div class="message-meta mt-1">
                <small class="text-muted">{{.Timestamp.Format "15:04"}}</small>
            </div>
        </div>
    </div>
</div>
{{end}}
